<template>
  <div class="end" :style="style">
    <div class="text">
      <slot></slot>
    </div>
  </div>
</template>

<script lang="ts">
import { Component, Vue, Prop } from "vue-property-decorator";

@Component({
  name: "End",
  components: {}
})
export default class End extends Vue {
  @Prop({ default: 156 }) width!: number;

  private style: any = {};

  private created() {
    this.$set(this.style, "width", `${this.width}px`);
  }
}
</script>

<style lang="less" scoped>
@import "~@/assets/style/mixin.less";
.end {
  padding: 10px;
  position: relative;

  .text {
    margin: 0 auto;
    display: inline-block;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    background: white;
    z-index: 1;
    padding: 4px 6px;
  }
  &::before {
    content: "";
    position: absolute;
    background-image: linear-gradient(to right, #ffffff, #979797, #ffffff);
    height: 1px;
    left: 0;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
  }
}
</style>
